import { useState } from 'react';
import { list, titleList } from './index.config';
import './index.less';
import banner from '@/config/img/banner.png';

const HistoryDepartmen = () => {
  const [title, setTitle] = useState('姑娘歌');
  return (
    <div className="history-department">
      <div className="banner">
        <img src={banner} alt="" />
      </div>
      <div className="content">
        <div className="history-department-title">历史发展</div>
        <div className="history-content">
          <div className="top">
            {titleList.map((val) => {
              return (
                <div
                  className={`top-item ${title == val.title ? 'active' : ''}`}
                  onClick={() => {
                    setTitle(val.title);
                  }}
                >
                  {val.title}
                </div>
              );
            })}
            <div className="line"></div>
          </div>
          <div className="bottom">
            <div className="bottom-title">{list[title]?.title}</div>
            <div className="content">
              <img src={list[title]?.img} alt="" />
              <div className="desc">{list[title]?.desc}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
export default HistoryDepartmen;
